<template>
    <div class="home">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>照片管理</span>
            </div>

            <el-form
                    :inline="true"
                    :label-position="labelPosition"
                    label-width="80px"
                    :model="formLabelAlign"
            >
                <div class="block" v-for="item in imageForm" :key="item.pId">
                    <el-card class="box-card" >
                        <el-form-item>
            <span slot="label">
              <el-button
                      type="primary"
                      icon="el-icon-edit"
                      circle
                      @click="updateName(item.pId)"
              ></el-button>
              <el-button
                      type="warning"
                      v-if="item.isCollection == 0"
                      icon="el-icon-star-off"
                      circle
                      @click="toCollection(item.pId)"
              ></el-button>
              <el-button
                      type="warning"
                      v-else
                      icon="el-icon-star-on"
                      circle
                      @click="toCollection(item.pId)"
              ></el-button>
              <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click="toDelete(item.filePath)"
              ></el-button>
              <br />
              <h1 align="center">{{ item.pName }}</h1>
            </span>
                            <!--  <span class="demonstration">{{ item.pName }}</span>-->
                            <el-image
                                    style="width: 200px; height: 200px"
                                    :src="item.filePath"
                                    :fit="contain"
                                    @click="toDetail(item.filePath,item.pName)"
                            ></el-image>
                        </el-form-item>
                    </el-card>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>

    export default {
        name: "PhotoManage",
        data() {
            return {
                labelPosition: "top",
                fits: ["contain"],
                url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                imageForm: {
                    pId: "",
                    pName: "",
                    isCollection: 0, //是否被收藏
                    filePath: "",
                },
            };
        },
        created() {
            this.listAll();
        },
        methods: {
            listAll() {
                this.$axios.get("photo/list").then((response) => {
                    console.log(response.data);
                    this.imageForm = response.data.data;
                });
            },
            //更改照片
            updateName(pId) {
                this.$prompt("更改照片名", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    // inputPlaceholder:'0~1为缩小，1以上为放大'
                })
                    .then(({ value }) => {
                        // this.$message({
                        //     type:'success',
                        //     message:'照片名'+value+"照片ID"+pId
                        // });
                        //调用AXIOS
                        this.$axios
                            .post("photo/updatePhoto", {
                                pId: pId,
                                pName: value,
                            })
                            .then((response) => {
                                this.$message({
                                    //弹出成功提示
                                    showClose: true,
                                    type: "success",
                                    message: response.data.msg,
                                });
                                this.listAll();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消输入",
                        });
                    });
            },
            //收藏函数
            toCollection(pId) {
                this.$axios
                    .post(
                        "photo/collect",
                        this.$qs.stringify({
                            pId: pId,
                        })
                    )
                    .then((response) => {
                        this.$message({
                            //弹出成功提示
                            showClose: true,
                            type: "success",
                            message: response.data.msg,
                        });
                        this.listAll();
                    });
            },
            toDelete(filePath) {
                this.$confirm('此操作将永久删除该图片 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get(
                        "photo/delete",
                        {params: {
                                key: filePath  }
                        }
                    ).then((response) => {
                        console.log(response.data);
                        this.$message({
                            type: 'success',
                            message: "删除成功"
                        });
                        this.listAll()
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            toDetail(url,pName) {
                this.$router.push({
                    name: "process",
                    params: {
                        url:url,
                        pName:pName
                    },
                });
            },
        },
    };
</script>

<style lang="less">
    .home {
        .el-card {
            background-color: #8181c7ba;
            .el-card__header {
                font-size: 20px;
                font-weight: 600;
                background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                color: #234d65;
            }
        }
    }
    .block {
        display: inline-block;
        float: left;
        .box-card{
            background-color: #ceced2a3;
            margin-left: 15px;
            margin-right: 15px;
            margin-top: 10px;
        }
    }
    .el-form-item {
        /*垂直居中 */
        vertical-align: middle;
        /*水平居中*/
        text-align: center;
        padding: 0px;
    }
</style>
